<template>
	<view>
		<!-- 引入搜索组件 -->
		<my-search class="search-box" @gosearch="gosearch"></my-search>
		<!-- 轮播图 -->
		<view class="swipercss">
			<swiper class="swiper" indicator-dots="true" autoplay="true" circular="true">
				<swiper-item v-for="(item,index) in imgUrl" :key="index">
					<image :src="item.img" mode="aspectFill"></image>
				</swiper-item>
			</swiper>
		</view>
		<!-- 导航区域 -->
		<view class="nav">
			<view class="nav-item" v-for="(item,index) in navList" :key="index" @click="navGo(item.path)">
				<image :src="item.icon" mode="aspectFit"></image>
				<text>{{item.title}}</text>
			</view>
		</view>
		<!-- 推荐商品 -->
		<view class="hot-goods">
			<view class="tit">推荐商品</view>
			<goods-list @goshop="navigatorGo" :shopList="shopList"></goods-list>
		</view>
	</view>
</template>

<script>
	import goodsList from '../../components/goods-list/goods-list'
	import cartMixins from "@/mixins/tabber-badge.js"
	export default {
		mixins:[cartMixins],
		data() {
			return {
				imgUrl:[],
				shopList:[],
				navList:[
					{
						title:"乐购超市",
						path:'/pages/goods/goods',
						icon:'/static/shop.png'
					},
					{
						title:"联系我们",
						path:'/pages/concat/concat',
						icon:'/static/d2.png'
					},
					{
						title:"学习视频",
						path:'/pages/pics/pics',
						icon:'/static/shequ.png'
					},
					{
						title:"社区图片",
						path:'/pages/video/video',
						icon:'/static/video.png'
					}
					
				]
			}
		},
		methods: {
			//promise处理异步请求
			//async await同步请求
			async getImg(){
				const res = await this.$myRequest({
					url:"/getSwipe"
				})
				this.imgUrl = res.data
			},
			//获取商品函数
			async getShoplist(){
				const res = await this.$myRequest({
					url:"/selectGoodsList"
				})
				this.shopList = res.data
			},
			//导航栏函数
			navGo(path){
				console.log(path);
				uni.navigateTo({
					url:path
				})
			},
			navigatorGo(e){
				uni.navigateTo({
					url:"/pages/goods/goods-detail?id=" + e
				})
			},
			gosearch(){
				uni.navigateTo({
					url:'/pages/search/search'
				})
			}
		},
		onLoad(){
			this.getImg();
			this.getShoplist();
		},
		components:{
			"goods-list":goodsList
		}
	}
</script>

<style lang="scss">
	// 轮播图
	.swipercss{
		width:750rpx;
		height: 300rpx;
		image{
			width: 100%;
		}
	}
	// 导航
	.nav{
		display: flex;
		.nav-item{
			width: 25%;
			text-align: center;
			image{
				width: 120rpx;
				height:120rpx;
				margin:15px 20px auto;
				border-radius: 15px;
			}
			text{
				font-size: 1.1rem;
				font-family:宋体;
				font-weight: 700;
			}
		}
	}
	// 推荐商品
	.hot-goods{
		background-color: #caca97;
		overflow: hidden;
		margin-top: 7px;
		.tit{
			height: 50px;
			line-height: 50px;
			color: $shop-color;
			text-align: center;
			letter-spacing: 20px;//字与字之间的距离
			background-color: azure;
			margin: 10px 0;
			font-size: 1.2rem;
			font-family:宋体;
			font-weight: 700;
			
		}
	}
	.search-box{
		position: sticky;
		top: 0;
		z-index: 999;
	}
	
</style>
